<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户协议 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item">首页</a>
                    <a href="activities.html" class="nav-item">活动列表</a>
                    <a href="discover.html" class="nav-item">发现</a>
                    <a href="about.html" class="nav-item">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                        <i class="fa fa-bell text-info"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item">首页</a>
                <a href="activities.html" class="nav-item">活动列表</a>
                <a href="discover.html" class="nav-item">发现</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-10">
            <h1 class="text-3xl font-bold mb-2">用户协议</h1>
            <p class="text-info">使用系统前请仔细阅读本协议条款</p>
        </section>

        <!-- 用户协议内容 -->
        <section class="bg-white rounded-xl shadow-sm p-6 md:p-8 mb-10">
            <div class="prose max-w-none">
                <p class="text-gray-600 mb-8">
                    欢迎使用黄淮学院校园活动管理系统（以下简称"系统"）。本协议规定了您在使用系统时应遵守的条款和条件。请您在使用系统前仔细阅读本协议，了解您的权利和义务。
                </p>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">1. 协议接受</h2>
                    <p class="text-gray-600 mb-4">
                        一旦您注册账号、登录或以任何方式使用系统，即表示您已同意接受本协议的全部条款和条件。如果您不同意本协议的任何内容，请不要使用系统。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">2. 用户资格</h2>
                    <p class="text-gray-600 mb-4">
                        使用系统的用户必须是黄淮学院的在校师生或经授权的相关人员。注册账号时，您必须提供真实、准确、完整的个人信息，并在信息变更时及时更新。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">3. 账号管理</h2>
                    <p class="text-gray-600 mb-4">
                        您负责保护您的账号和密码安全，并对使用您账号进行的所有活动承担全部责任。如发现账号被未经授权使用，应立即通知系统管理员。
                    </p>
                    <p class="text-gray-600 mb-4">
                        您不得：
                    </p>
                    <ul class="list-disc pl-6 text-gray-600 space-y-2">
                        <li>转让、出售或出借您的账号</li>
                        <li>使用他人账号登录系统</li>
                        <li>尝试破解、入侵系统或干扰系统正常运行</li>
                        <li>使用系统进行任何非法活动</li>
                    </ul>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">4. 活动发布与参与</h2>
                    <p class="text-gray-600 mb-4">
                        <strong>活动发布：</strong>
                    </p>
                    <ul class="list-disc pl-6 text-gray-600 space-y-2">
                        <li>发布活动需要具备相应权限，需经系统管理员审核</li>
                        <li>活动信息必须真实、准确、合法，不得发布虚假信息</li>
                        <li>活动内容不得违反法律法规、学校规定或公序良俗</li>
                        <li>活动发布者应对活动内容和参与人员安全负责</li>
                    </ul>
                    
                    <p class="text-gray-600 mt-4 mb-4">
                        <strong>活动参与：</strong>
                    </p>
                    <ul class="list-disc pl-6 text-gray-600 space-y-2">
                        <li>参与活动前应仔细阅读活动详情和注意事项</li>
                        <li>按照要求准确填写报名信息，对信息真实性负责</li>
                        <li>遵守活动现场规则，服从活动组织方安排</li>
                        <li>如需取消报名，应在规定时间内操作</li>
                    </ul>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">5. 知识产权</h2>
                    <p class="text-gray-600 mb-4">
                        系统中所有内容（包括但不限于文字、图片、音频、视频、软件、程序、数据等）的知识产权均归黄淮学院或相关权利人所有。未经授权，您不得复制、修改、传播、出版、展示或以任何方式使用这些内容。
                    </p>
                    <p class="text-gray-600 mb-4">
                        您在系统中发布的内容，授予黄淮学院永久、不可撤销、全球范围内的使用权，包括但不限于复制、修改、展示、传播等权利。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">6. 隐私保护</h2>
                    <p class="text-gray-600 mb-4">
                        我们重视您的隐私保护，将按照<a href="privacy.html" class="text-primary hover:underline">隐私政策</a>处理您的个人信息。使用系统即表示您同意我们按照隐私政策收集、使用和保护您的信息。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">7. 免责声明</h2>
                    <p class="text-gray-600 mb-4">
                        系统按"现状"提供服务，我们不对系统的安全性、可靠性、准确性或完整性做出任何保证。对于因使用系统或无法使用系统而导致的任何直接、间接、偶然、特殊或后果性的损害，黄淮学院不承担责任。
                    </p>
                    <p class="text-gray-600 mb-4">
                        活动参与存在一定风险，参与者应自行承担风险。黄淮学院不对活动中的意外事故、人身伤害或财产损失承担责任，除非是由黄淮学院的故意或重大过失造成。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">8. 协议修改</h2>
                    <p class="text-gray-600 mb-4">
                        我们有权随时修改本协议。修改后的协议将在系统上公布，您继续使用系统即表示接受修改后的协议。我们鼓励您定期查看本协议。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">9. 终止服务</h2>
                    <p class="text-gray-600 mb-4">
                        您可以随时停止使用系统。我们有权在以下情况下终止或暂停向您提供服务：
                    </p>
                    <ul class="list-disc pl-6 text-gray-600 space-y-2">
                        <li>您违反本协议的任何条款</li>
                        <li>您的账号被用于非法活动</li>
                        <li>我们认为终止服务是必要的安全措施</li>
                        <li>系统维护或升级需要</li>
                    </ul>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">10. 法律适用与争议解决</h2>
                    <p class="text-gray-600 mb-4">
                        本协议的解释、效力及纠纷的解决，适用中华人民共和国法律。如发生争议，双方应首先协商解决；协商不成的，任何一方均可向黄淮学院所在地有管辖权的人民法院提起诉讼。
                    </p>
                </div>
                
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4 text-dark">11. 其他条款</h2>
                    <p class="text-gray-600 mb-4">
                        本协议的任何条款被认定为无效或不可执行，不影响其他条款的效力。本协议构成双方之间关于系统使用的完整协议，取代之前的任何口头或书面协议。
                    </p>
                </div>
                
                <div class="mt-10 pt-6 border-t border-gray-200">
                    <p class="text-gray-500 text-sm">
                        最后更新时间：2023年9月1日
                    </p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
</body>
</html>